<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue'
import { SvgIcon } from '../svg-icon'
import { ref } from 'vue';
import { ElTree } from 'element-plus'

const data: any[] = [
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 3',
    children: [
      {
        label: 'Level two 3-1',
        children: [
          {
            label: 'Level three 3-1-1',
          },
        ],
      },
      {
        label: 'Level two 3-2',
        children: [
          {
            label: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
]

const defaultProps = {
  children: 'children',
  label: 'label',
}

const searchValue = ref('')

const treeRef = ref<InstanceType<typeof ElTree>>()

const searchTree = (v: string) => {
  treeRef.value?.filter(v)
}

function filterTreeHandle(value: string, data: any) {
  if (!value) {
    return true
  }
  return data.label.includes(value)
}
</script>

<template>
  <div class="h-full w-full">
    <el-input v-model="searchValue" :prefix-icon="Search" class="mb-2" placeholder="请输入关键字" @change="searchTree" />
    <el-tree
      ref="treeRef"
      :data="data"
      :props="defaultProps"
      :filter-node-method="filterTreeHandle"
    >
      <template #default="{ node }">
        <el-space class="important:gap-[6px]">
          <SvgIcon name="i-ic:round-folder" />
          <span>{{ node.label }}</span>
        </el-space>
      </template>
    </el-tree>
  </div>
</template>
